<template>
  <view class="device-card" @click="handleClick">
    <view class="device-header">
      <view class="device-name">{{ device.name }}</view>
      <view :class="['device-status', device.status]">{{ statusText }}</view>
    </view>
    <view class="device-info">
      <view class="info-item">
        <text class="label">设备ID：</text>
        <text class="value">{{ device.id }}</text>
      </view>
      <view class="info-item">
        <text class="label">设备类型：</text>
        <text class="value">{{ device.type }}</text>
      </view>
      <view class="info-item">
        <text class="label">最后更新：</text>
        <text class="value">{{ device.lastUpdate }}</text>
      </view>
    </view>
    <view class="device-data">
      <view v-for="(value, key) in device.data" :key="key" class="data-item">
        <text class="label">{{ key }}：</text>
        <text class="value">{{ value }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  device: {
    type: Object,
    required: true,
    default: () => ({
      id: '',
      name: '',
      type: '',
      status: 'offline',
      lastUpdate: '',
      data: {}
    })
  }
})

const emit = defineEmits(['click'])

const statusText = computed(() => {
  const statusMap = {
    online: '在线',
    offline: '离线',
    error: '故障',
    warning: '警告'
  }
  return statusMap[props.device.status] || '未知'
})

const handleClick = () => {
  emit('click', props.device)
}
</script>

<style lang="scss" scoped>
.device-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

  .device-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .device-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }

    .device-status {
      padding: 4rpx 16rpx;
      border-radius: 30rpx;
      font-size: 24rpx;

      &.online {
        background-color: #e8f5e9;
        color: #4caf50;
      }

      &.offline {
        background-color: #f5f5f5;
        color: #9e9e9e;
      }

      &.error {
        background-color: #ffebee;
        color: #f44336;
      }

      &.warning {
        background-color: #fff3e0;
        color: #ff9800;
      }
    }
  }

  .device-info {
    margin-bottom: 20rpx;

    .info-item {
      display: flex;
      margin-bottom: 10rpx;
      font-size: 28rpx;

      .label {
        color: #666666;
        width: 160rpx;
      }

      .value {
        color: #333333;
        flex: 1;
      }
    }
  }

  .device-data {
    border-top: 1px solid #f0f0f0;
    padding-top: 20rpx;

    .data-item {
      display: flex;
      margin-bottom: 10rpx;
      font-size: 28rpx;

      .label {
        color: #666666;
        width: 160rpx;
      }

      .value {
        color: #333333;
        flex: 1;
      }
    }
  }
}
</style> 